<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>04.JSX</title>
  </head>
  <body>
    <!-- 2. 准备一个根容器：将来React内容都会渲染到容器内部 -->
    <div id="root"></div>
    <!-- 1. 引入 react 相关的库：注意引用顺序 -->
    <!-- 引入 react 库，暴露 React 函数对象 -->
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      /*
        js一共有多少种数据类型：
          基本数据类型  string number boolean null undefined symbol bigint
          引用数据类型  object array function

        JSX中基本数据类型只能渲染 string number
        JSX中引用数据类型只能渲染 array, 但要求数组中只能包含 string number 和 React元素 数据
          渲染数组数据会自动展开数据的所有数据进行渲染
      */

      const a = "a";
      const b = 6;
      const c = true;
      const null1 = null;
      const undefined1 = undefined;
      const symbol = Symbol();
      const bigint = 456n;
      const object = { name: "华哥", age: 38 };
      const array = ["haha", 4, 5, 6];
      const function1 = function () {
        console.log(111);
      };

      const element = (
        <div>
          <p>string:{a}</p>
          <p>number{b}</p>
          <p>boolean{c}</p>
         
        </div>
      );

      ReactDOM.createRoot(document.getElementById('root')).render(element)
    </script>
  </body>
</html>
